<template>
  <div v-for="opt in options" :key="opt.value">
    <AtomCheckbox
      :label="opt.label"
      :value="opt.value"
      :name="name"
      :checked="value.includes(opt.value)"
      group
      @update-checked-group="handleCheckGroupUpdate"
    />
  </div>
</template>

<script setup lang="ts">
interface Props {
  options: { label: string; value: string }[]
  value: any[]
  name: string
}
const props = withDefaults(defineProps<Props>(), {
  options: () => [],
  value: () => [],
  name: ''
})
const { options, value, name } = toRefs(props)
const emit = defineEmits(['update:value'])

const handleCheckGroupUpdate = (params: {
  value: string
  checked: boolean
}) => {
  const updateValue = [...value.value]
  if (params.checked) {
    updateValue.push(params.value)
  } else {
    updateValue.splice(updateValue.indexOf(params.value), 1)
  }
  emit('update:value', updateValue)
}
</script>

<style scoped></style>
